<template>
	<view class="echart" id="mychart" :style="myChartStyle"></view>
</template>

<script>
	import * as echarts from "echarts";

	export default {
		name: "BarChart",
		props: {
			teamCompare: {
				type: Object,
				required: true
			},
			copyTeamCompare: {
				type: Object,
				required: true
			},
			shujuDataList: {
				type: Object,
				required: true
			},
			scoringWay: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				xData: null,
				xDataA: ["总分", "一分", "二分", "罚球", "盖帽", "犯规", "助攻", "抢断", "篮板"], //横坐标
				xDataB: ["总分", "二分", "三分", "罚球", "盖帽", "犯规", "助攻", "抢断", "篮板"],
				yData: [], //人数数据
				taskDate: [],
				myChartStyle: {
					float: "left",
					width: "100%",
					height: "400px"
				}, //图表样式
				shujuData: {},
				scoring: -1
			};
		},
		mounted() {
			this.initEcharts();
		},
		methods: {
			initEcharts() {
				this.shujuData = this.shujuDataList;
				this.scoring = this.scoringWay;
				if (this.scoring == 0) {
					this.xData = this.xDataB;
					this.yData = [this.teamCompare.score, this.teamCompare.ef, this.teamCompare.sf, this.teamCompare.fq,
						this.teamCompare.gm, this.teamCompare.fg, this.teamCompare.zg, this.teamCompare.qd, this
						.teamCompare.lb
					]
					this.taskDate = [this.copyTeamCompare.score, this.copyTeamCompare.ef, this.copyTeamCompare.sf, this
						.copyTeamCompare.fq, this.copyTeamCompare.gm, this.copyTeamCompare.fg, this.copyTeamCompare.zg,
						this.copyTeamCompare.qd, this.copyTeamCompare.lb
					]
				} else if (this.scoringWay == 1) {
					this.xData = this.xDataA;
					this.yData = [this.teamCompare.score, this.teamCompare.yf, this.teamCompare.ef, this.teamCompare.fq,
						this.teamCompare.gm, this.teamCompare.fg, this.teamCompare.zg, this.teamCompare.qd, this
						.teamCompare.lb
					]
					this.taskDate = [this.copyTeamCompare.score, this.copyTeamCompare.yf, this.copyTeamCompare.ef, this
						.copyTeamCompare.fq, this.copyTeamCompare.gm, this.copyTeamCompare.fg, this.copyTeamCompare.zg,
						this.copyTeamCompare.qd, this.copyTeamCompare.lb
					]
				}

				// this.taskDate = [this.copyTeamCompare.yf, this.copyTeamCompare.ef, this.copyTeamCompare.sf, this.copyTeamCompare.fq, this.copyTeamCompare.gm, this.copyTeamCompare.fg, this.copyTeamCompare.zg, this.copyTeamCompare.qd, this.copyTeamCompare.lb, this.copyTeamCompare.score]
				// 多列柱状图
				const mulColumnZZTData = {
					xAxis: {
						data: this.xData,
						axisLabel: {
							interval: 0,
							rotate: 45,
							margin: 10,
							fontSize: "12",
						}
					},
					// 图例
					legend: {
						data: ["球队总数据", "球队场均数据"],
						top: "0%"
					},
					grid: {
						left: '3%',
						right: '3%',
						bottom: '5%',
						containLabel: true
					},
					yAxis: {},
					series: [{
							type: "bar", //形状为柱状图
							data: this.yData,
							name: "球队总数据", // legend属性
							label: {
								// 柱状图上方文本标签，默认展示数值信息
								show: true,
								position: "top"
							}
						},
						{
							type: "bar", //形状为柱状图
							data: this.taskDate,
							name: "球队场均数据", // legend属性
							label: {
								// 柱状图上方文本标签，默认展示数值信息
								show: true,
								position: "top"
							}
						}
					]
				};
				const myChart = echarts.init(document.getElementById("mychart"));
				myChart.setOption(mulColumnZZTData);
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.echart {
		box-sizing: border-box;
		width: 100%;
		// padding-top: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 800px;
	}
</style>